<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ page contentType="text/html; charset=utf-8"%>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/head.jsp" flush="true"/>
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=WdVQlQjbM2tUmG16hxXUMD2pmbo40AY4"></script>
    <jsp:include page="/resources/inc/footer.jsp" flush="true"/>
</head>
<body>
<div id="allmap"></div>
<div style="    position: absolute;top: 5px;left: 5px;">
    <input type="text" class="form-control" id="searchmap" placeholder="输入关键字搜索地图位置。" />
</div>
</body>
</html>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.4035,39.915),8);
    setTimeout(function(){
        map.setZoom(14);
    }, 2000);  //2秒后放大到14级
    map.enableScrollWheelZoom(true);

    var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map, panel: "r-result"}
    });
    $("#searchmap").change(function(){
        local.search($(this).val());
    });

    //单击获取点击的经纬度
    map.addEventListener("click",function(e){
        var point = e.point;
        $.MapConvert.Convert_BD09_To_GCJ02(point);
        // $("#latitude").val(point.lat);
        // $("#longitude").val(point.lng);
        console.log("point",point);
        window.parent.postMessage(JSON.stringify(point),'*');
    });

</script>